// 整体主题色变量
:root {
  --global-font-size: 14px;

  --primary: #49b1f5;
  --router-color: #dddddd;
  --font-color: #4b4948;
  --second-font-color: #b3b7ff;
  --hot-color: #f00;
  --md-active: #49b1f5;
  --global-white: #fff;
  --global-black: #000;
  --global-shadow-white: rgba(255, 255, 255, 0.5);
  --meta-color: #858585;
  --comment-grey: #a4a4a4;
  --border-color: #7ec4f2;
  --hr-border: #a9d5f4;
  --top: #f26c60;
  --error: #f56c6c;
  // music
  --music-main-active: #62c28a;
  --music-main-bg: #fff;
  --mask-bg: rgba(0, 0, 0, 0.5);
  --shadow-button-bg: rgba(210, 210, 210, 0.5);
  --card-bg: #fff;
  --card-box-shadow: 0 3px 6px 3px rgba(7, 17, 27, 0.06);
  --card-hover-box-shadow: 0 3px 6px 3px rgba(7, 17, 27, 0.15);
  --chat-bg: #e6e6e6;
  --global-gradient: #fff;
  --header-bg: rgba(29, 30, 31, 0.5);
  --home-bg: #303030;
  --home-mask-color: rgba(0, 0, 0, 0.2);

  --menu-color: #fff;

  --button-linear-gradient: linear-gradient(300deg, #74ebd5 0%, #9face6 100%);
  --button-linear-gradient-h: linear-gradient(300deg, #9face6 0%, #74ebd5 100%);

  --wave-one-color: rgba(255, 255, 255, 0.7);
  --wave-two-color: rgba(255, 255, 255, 0.5);
  --wave-three-color: rgba(255, 255, 255, 0.3);
  --wave-four-color: rgba(255, 255, 255, 1);
}

html.dark {
  --font-color: #b8b8b8;
  --global-gradient: #282828;
  --card-bg: #303030;
  --shadow-button-bg: rgba(0, 0, 0, 0.2);
  --home-bg: #282828;
  --home-mask-color: rgba(0, 0, 0, 0.4);
  --music-main-bg: #303030;

  --menu-color: var(--font-color);

  --button-linear-gradient: linear-gradient(300deg, #a286a2 0%, #648faf 100%);
  --button-linear-gradient-h: linear-gradient(300deg, #648faf 0%, #a286a2 100%);

  --wave-one-color: rgba(40, 40, 40, 0.7);
  --wave-two-color: rgba(40, 40, 40, 0.5);
  --wave-three-color: rgba(40, 40, 40, 0.3);
  --wave-four-color: rgba(40, 40, 40, 1);
}
